@import './base.css';

/* body {
  scrollbar-width: none;
  scrollbar-color: transparent transparent;
} */

#app {
  /* max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  font-weight: normal; */
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
  overflow: hidden;

}

a,
.green {
  text-decoration: none;
  color: hsla(160, 100%, 37%, 1);
  transition: 0.4s;
  padding: 3px;
}

@media (hover: hover) {
  a:hover {
    background-color: hsla(160, 100%, 37%, 0.2);
  }
}

@media (min-width: 1024px) {
  body {
    display: flex;
    place-items: center;
  }

  #app {
    display: grid;
    /* grid-template-columns: 1fr 1fr;
    padding: 0 2rem; */
  }
}

/* 动画效果 */

/* 进场动画 */
.anime-enter-active {
  animation: act 1s;
}

/* 出场动画 */
.anime-leave-active {
  animation: act 1s reverse;
}

@keyframes act {
  0% {
    opacity: 0;
    transform: translateX(100px);
  }

  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

.animetwo-enter-active {
  animation: acttwo 1s;
}

/* 出场动画 */
.animetwo-leave-active {
  animation: acttwo 1s reverse;
}

@keyframes acttwo {
  0% {
    opacity: 0;
    transform: translateX(-100px);
  }

  100% {
    opacity: 1;
    transform: translateX(0px);
  }
}

/* 动画效果 */


.shelter {
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .9);
  position: fixed;
  left: 0;
  top: 0;
  z-index: 999;
}

.clear_go {
  width: 100%;
  height: 92px;
}

.chat_box {
  width: 100%;
  height: 100%;
  display: flex;

}

.chat_box .chat_list {
  width: 400px;
  background-color: #f5f7fb;
  padding: 0 10px 0 25px;
  box-sizing: border-box;
  height: 100vh;
}

.chat_box .chat_list .list_title {
  font-size: 23px;
  color: #333;
  font-weight: bold;
  width: 100%;
  height: 70px;
  line-height: 70px;
}

.chat_box .chat_list .list_box {
  width: 100%;
  height: calc(100% - 70px);
  overflow: hidden;
  overflow-y: auto;
}

.chat_box .chat_list .list {
  width: 100%;
  display: flex;
  align-items: center;
  padding: 15px;
  border-radius: 10px;
  margin-top: 8px;
}

.chat_box .chat_list .list:hover {
  background-color: #e6ebf5;
}

.listbg {
  background-color: #e6ebf5 !important;
}

.chat_box .chat_list .list .avatar {
  width: 65px;
  height: 65px;
  border-radius: 50%;
}

.chat_box .chat_list .list .avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.chat_box .chat_list .list .list_text {
  width: calc(100% - 135px);
  margin-left: 15px;
}

.chat_box .chat_list .list .list_text .name {
  color: #333;
  font-weight: bold;
  font-size: 20px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  word-wrap: break-word;
  word-break: break-all;

}

.chat_box .chat_list .list .list_text .id {
  color: #999;
  font-size: 15px;
}

.chat_box .chat_list .list .state {
  width: 40px;
  font-size: 13.5px;
  font-weight: bold;
  height: 24px;
  border-radius: 24vw;
  color: #ef60a6;
  background-color: #f4d7e2;
  margin-left: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat_box .chat_list .list .list_text {
  flex: 1;
  margin-left: 15px;
}

.chat_box .chat_content {
  flex: 1;
  background-color: #fff;
  height: 100vh;
  position: relative;
}

.chat_box .chat_content .content_title {
  width: 100%;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 25px;
  box-sizing: border-box;
  border-bottom: 1px solid #f5f7fb;
}

.chat_box .chat_content .content_title .name {
  font-weight: bold;
  color: #333;
  font-size: 20px;
}

.chat_box .chat_content .content_title button {
  font-size: 14px;
  background-color: #7269ef;
  padding: 0;
  color: #fff;
  padding: 0 15px;
  border-radius: 0.3vw;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  box-sizing: border-box;
  border: 2px solid #7269ef;
}

.chat_box .chat_content .content_title button:hover {
  background-color: #fff;
  color: #7269ef;
}

.chat_box .chat_content .input_box {
  width: 100%;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 99;
  display: flex;
  align-items: center;
  padding: 25px;
  box-sizing: border-box;
  border-top: 1px solid #f5f7fb;
  background-color: #fff;
}

.chat_box .chat_content .input_box .image {
  font-size: 30px;
  color: #7269ef;
  width: 50px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  position: relative;
}

.chat_box .chat_content .input_box .sending {
  font-size: 30px;
  background-color: #7269ef;
  width: 50px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  border-radius: 10px;
  margin-left: 10px;
  box-sizing: border-box;
  border: 2px solid #7269ef;
}

.chat_box .chat_content .input_box .sending:hover {
  background-color: #fff;
  color: #7269ef;
}

.chat_box .chat_content .input_box .input {
  flex: 1;
  background-color: #e6ebf5;
  height: 45px;
  border-radius: 10px;
}

.chat_box .chat_content .input_box .input input {
  width: 100%;
  height: 100%;
  font-size: 15px;
  color: #333;
  border: none;
  background-color: transparent;
  border-radius: 10px;
  padding-left: 10px;
  box-sizing: border-box;
}

.chat_box .chat_content .input_box .input input {
  border: 2px solid #e6ebf5;
  outline: none;
}

.chat_box .chat_content .input_box .input input:focus {
  border-color: #7269ef;
}

.chat_box .chat_content .input_box .input input:hover {
  border-color: #7269ef;
}

.chat_box .chat_content .content_list {
  height: calc(100% - 95px);
  overflow: hidden;
  overflow-y: auto;
  padding: 25px;
  box-sizing: border-box;
}

.chat_box .chat_content .content_list .go_list {
  width: 100%;
  display: flex;
  margin-bottom: 20px;
}

.chat_box .chat_content .content_list .go_list .my_list {
  flex: 1;
  display: flex;
  align-items: flex-end;
}

.chat_box .chat_content .content_list .go_list .my_list .avatar {
  width: 50px;
  height: 50px;
  margin-right: 20px;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 50%;
}

.chat_box .chat_content .content_list .go_list .my_list .avatar:hover {
  border-color: #999;
}

.chat_box .chat_content .content_list .go_list .my_list .avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.chat_box .chat_content .content_list .go_list .my_list .chat_text {
  flex: 1;
}

.chat_box .chat_content .content_list .go_list .my_list .chat_text .name {
  font-size: 15px;
  color: #333;
  font-weight: bold;
  margin-top: 10px;
}

.chat_box .chat_content .content_list .go_list .my_list .chat_text .text_box {
  display: flex;
}

.chat_box .chat_content .content_list .go_list .my_list .chat_text .more {
  font-size: 15px;
  color: #666;
  margin-left: 7px;
  position: relative;
}

.chat_box .chat_content .content_list .go_list .my_list .chat_text .more .drawers_box {
  width: 140px;
  border: 1px solid #f5f7fb;
  border-radius: 2px;
  background-color: #fff;
  position: absolute;
  left: 0;
  top: 25px;
  padding: 12px 16px;
}

.chat_box .chat_content .content_list .go_list .my_list .chat_text .more .drawers_box .drawers {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chat_box .chat_content .content_list .go_list .my_list .chat_text .more .drawers_box .drawers:nth-child(2) {
  margin-top: 5px;
}

.chat_box .chat_content .content_list .go_list .my_list .chat_text .more .drawers_box .drawers .text {
  font-size: 13px;
  color: #333;
}

.chat_box .chat_content .content_list .go_list .my_list .chat_text .more .drawers_box .drawers .icon {
  font-size: 15px;
  color: #666;
}

.chat_box .chat_content .content_list .go_list .my_list .chat_text .text_content {
  max-width: 60%;
  background-color: #7269ef;
  border-radius: 8px;
  padding: 10px 20px;
  position: relative;
  box-sizing: border-box;
  border: 1px solid #7269ef;
}

.chat_box .chat_content .content_list .go_list .my_list .chat_text .text_content .triangle {
  width: 0;
  height: 0;
  border: 10px solid;
  border-color: transparent transparent transparent #7269ef;
  position: absolute;
  left: 0;
  bottom: -10px;

}

.chat_box .chat_content .content_list .go_list .my_list .chat_text .text_content .img {
  background-color: #fff;
  width: 200px;
  padding: 5px 0;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat_box .chat_content .content_list .go_list .my_list .chat_text .text_content .img img {
  width: 96%;
  height: 120px;
  border-radius: 5px;
  display: block;
}

.chat_box .chat_content .content_list .go_list .my_list .chat_text .text_content .text {
  font-size: 18px;
  color: #fff;
  word-wrap: break-word;
  /* 或 overflow-wrap: break-word; */
  word-break: break-all;
  /* 处理长单词的换行 */
  hyphens: auto;
  /* 自动添加连字符以帮助换行 */
}

.chat_box .chat_content .content_list .go_list .my_list .chat_text .text_content .time {
  text-align: right;
  font-size: 12px;
  color: #979df7;
  margin-top: 5px;
}

.chat_box .chat_content .content_list .go_list .my_list .chat_text .text_content .time span {
  font-size: 13px;
  margin-right: 4px;

}



.chat_box .chat_content .content_list .go_list .his_list {
  flex: 1;
  display: flex;
  align-items: flex-end;
}


.chat_box .chat_content .content_list .go_list .his_list .avatar {
  width: 50px;
  height: 50px;
  margin-left: 20px;
  box-sizing: border-box;
  border: 1px solid transparent;
  border-radius: 50%;
}

.chat_box .chat_content .content_list .go_list .his_list .avatar:hover {
  border-color: #999;
}

.chat_box .chat_content .content_list .go_list .his_list .avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.chat_box .chat_content .content_list .go_list .his_list .chat_text {
  flex: 1;

}

.chat_box .chat_content .content_list .go_list .his_list .chat_text .name {
  font-size: 15px;
  color: #333;
  font-weight: bold;
  margin-top: 10px;
  text-align: right;
}

.chat_box .chat_content .content_list .go_list .his_list .chat_text .text_box {
  display: flex;
  justify-content: flex-end;
}

.chat_box .chat_content .content_list .go_list .his_list .chat_text .more {
  font-size: 15px;
  color: #666;
  margin-right: 7px;
  position: relative;
}

.chat_box .chat_content .content_list .go_list .his_list .chat_text .more .drawers_box {
  width: 140px;
  border: 1px solid #f5f7fb;
  border-radius: 2px;
  background-color: #fff;
  position: absolute;
  right: 0;
  top: 25px;
  padding: 12px 16px;
}

.chat_box .chat_content .content_list .go_list .his_list .chat_text .more .drawers_box .drawers {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.chat_box .chat_content .content_list .go_list .his_list .chat_text .more .drawers_box .drawers:nth-child(2) {
  margin-top: 5px;
}

.chat_box .chat_content .content_list .go_list .his_list .chat_text .more .drawers_box .drawers .text {
  font-size: 13px;
  color: #333;
  word-wrap: break-word;
  /* 或 overflow-wrap: break-word; */
  word-break: break-all;
  /* 处理长单词的换行 */
  hyphens: auto;
  /* 自动添加连字符以帮助换行 */
}

.chat_box .chat_content .content_list .go_list .his_list .chat_text .more .drawers_box .drawers .icon {
  font-size: 15px;
  color: #666;
}

.chat_box .chat_content .content_list .go_list .his_list .chat_text .text_content {
  max-width: 60%;
  background-color: #f5f7fb;
  border-radius: 8px;
  padding: 10px 20px;
  position: relative;
}

.chat_box .chat_content .content_list .go_list .his_list .chat_text .text_content .triangle {
  width: 0;
  height: 0;
  border: 10px solid;
  border-color: transparent #f5f7fb transparent transparent;
  position: absolute;
  right: 0;
  bottom: -10px;

}

.chat_box .chat_content .content_list .go_list .his_list .chat_text .text_content .text {
  font-size: 18px;
  color: #333;
}

.chat_box .chat_content .content_list .go_list .his_list .chat_text .text_content .img {
  background-color: #fff;
  width: 200px;

  padding: 5px 0;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chat_box .chat_content .content_list .go_list .his_list .chat_text .text_content .img img {
  width: 96%;
  height: 120px;
  border-radius: 5px;
  display: block;
}

.chat_box .chat_content .content_list .go_list .his_list .chat_text .text_content .time {
  font-size: 12px;
  color: #859ec5;
  margin-top: 5px;
}

.chat_box .chat_content .content_list .go_list .his_list .chat_text .text_content .time span {
  font-size: 13px;
  margin-right: 4px;

}

.nomessages {
  flex: 1;
  background-color: #fff;
  height: 100vh;
  position: relative;
  font-size: 20vw !important;
  color: e6ebf5;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: .3;
}

@font-face {
  font-family: "iconfont";
  /* Project id 4866004 */
  src:
    url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2')
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-zanwuxiaoxi:before {
  content: "\e614";
}

.icon-fuzhi:before {
  content: "\e8b0";
}

.icon-shanchu:before {
  content: "\e8b6";
}

.icon-shijian:before {
  content: "\e630";
}

.icon-gengduo:before {
  content: "\e612";
}

.icon-fasong:before {
  content: "\e6c8";
}

.icon-tupian:before {
  content: "\e626";
}